<template>
  <div class="ibox">
    <!-- 工单信息 -->
    <div class="info-box">
      <div class="title">工单信息</div>
      <div class="list">
        <ul>
          <li>
            <label>提交时间：</label>
            <span>{{ details.createTime | getMyDate }}</span>
          </li>
          <li>
            <label>发起人：</label>
            <span>{{ details.createUserName }}</span>
          </li>
          <li>
            <label>指派人：</label>
            <span>{{ details.dealWithUserName }}</span>
          </li>
          <li>
            <label>抄送：</label>
            <span>{{ details.copyUserName }}</span>
          </li>
        </ul>
        <ul>
          <li>
            <label>门店：</label>
            <span>{{ details.pointName }}</span>
          </li>
          <li>
            <label>优先级：</label>
            <span v-if="details.priority == 1">高</span>
            <span v-if="details.priority == 2">中</span>
            <span v-if="details.priority == 3">低</span>
          </li>
          <li style="width: 50%;">
            <label>事件类型：</label>
            <div v-for="(item,index) in details.checkItems" :key="index">{{ item.checkItemContent }}</div>
          </li>
          <!-- <li>
						<label>备注：</label>
						<span>123456</span>
					</li> -->
        </ul>
        <ul />
      </div>
    </div>

    <!-- 工单照片 -->
    <div class="ibox-flex">
      <div class="workorder-photo">
        <div class="title">工单照片({{ picturesLength }})</div>
        <div class="img-box">
          <img v-for="(item,index) in details.pictures" :src="item.pictureUrl">
        </div>
      </div>
      <div class="workorder-photo">
        <div v-if="details.status != '1'">
          <div class="title">{{ details.dealWithUserName }}提交整改结果({{ dealWithPicturesLength }})</div>
          <div class="img-box">
            <img v-for="(item,index) in details.dealWithPictures" :src="item.pictureUrl">
          </div>
        </div>
        <div v-else>
          <div class="title">视频直播</div>
          <div class="img-box">
            <div class="panel-container home-right">
              <div class="panel-title2">
                <div class="operator">
                  <el-tooltip effect="dark" content="网页全屏" placement="top">
                    <i class="iconfont iconquanping" @click="webFS()" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="单个视频" placement="top">
                    <i class="iconfont icon-quanping5" :class="{active: grid_len === 1}" @click="changeTab(1)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="四格视频" placement="top">
                    <i class="iconfont icon-ic_mode_block" :class="{active: grid_len === 4}" @click="changeTab(4)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="九宫格视频" placement="top">
                    <i class="iconfont icon-nine-squares" :class="{active: grid_len === 9}" @click="changeTab(9)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="十二格视频" placement="top">
                    <i class="iconfont icon-jiugongge-line-" @click="changeTab(12,1,1)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="十二格视频" placement="top">
                    <i class="iconfont icon-jiugongge-line-" @click="changeTab(12,2,2)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="十二格视频(old)" placement="top">
                    <i class="iconfont icon-jiugongge-line-" @click="changeTab(12,2,3)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="十六格视频" placement="top">
                    <i class="iconfont icon-wanggeshitu" :class="{active: grid_len === 16}" @click="changeTab(16)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="二十四格视频" placement="top">
                    <i class="iconfont icon-louceng" :class="{active: grid_len === 24}" @click="changeTab(24)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="二十五格视频" placement="top">
                    <i class="iconfont icon-louceng" :class="{active: grid_len === 25}" @click="changeTab(25)" />
                  </el-tooltip>
                  <el-tooltip effect="dark" content="监控区全屏" placement="top">
                    <i ref="fullBtn" class="iconfont icon-ico_quanping" @click="changeFullScreen" />
                  </el-tooltip>
                </div>
              </div>
              <!-- 播放器区域 -->
              <div class="panel-content">
                <div v-if="tabActive12_3" ref="videoArea" class="video-content" :class="'video-item-' + grid_len">
                  <div v-for="i in grid_len" :key="i" class="video-item">
                    <!-- 播放器 -->
                    <player-box :ref="'videoPlayer' + (i - 1)" :stream_type="videoStream" :player_index="i-1"
                      :is_active="(grid_select == i-1) && has_active" @handleitem="handleGrid(arguments)" />

                  </div>
                </div>
                <div v-if="tabActive12_2" ref="videoArea" class="video-content" :class="'video-item-' + grid_len">
                  <div v-for="i in grid_len" :key="i" class="video-item12_2">
                    <!-- 播放器 -->
                    <player-box :ref="'videoPlayer' + (i - 1)" :stream_type="videoStream" :player_index="i-1"
                      :is_active="(grid_select == i-1) && has_active" @handleitem="handleGrid(arguments)" />
                  </div>
                </div>
                <div v-if="tabActive12_2_old" ref="videoArea" class="video-content" :class="'video-item-' + grid_len">
                  <div v-for="i in grid_len" :key="i" class="video-item12_2">
                    <!-- 播放器 -->
                    <player-box :ref="'videoPlayer' + (i - 1)" :stream_type="videoStream" :player_index="i-1"
                      :is_active="(grid_select == i-1) && has_active" @handleitem="handleGrid(arguments)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 事件 -->
    <div class="ibox-flex">
      <div v-if="details.status != 3" class="event-processing">
        <div class="title">事件处理</div>
        <el-form ref="workOrderStatus" :model="workOrderStatus" label-width="80px" style="width: 100%;">
          <el-form-item label="事件处理">
            <el-radio-group v-model="workOrderStatus.status">
              <el-radio v-if="details.status == 2" label="ACCEPT">验收通过</el-radio>
              <el-radio v-if="details.status == 2" label="REJECTED">驳回</el-radio>
              <el-radio v-if="details.status == 1" label="RECTIFICATION">整改</el-radio>
              <el-radio v-if="details.status == 1" label="NOT_RECTIFICATION">不整改</el-radio>
              <el-radio v-if="details.status == 1" label="TURN">指派</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-show="workOrderStatus.status == 'TURN'" label="处理人" prop="acceptUserId" label-width="80px">
            <el-select v-model="workOrderStatus.acceptUserId" placeholder="请选择处理人" clearable>
              <el-option v-for="(item,index) in orderListUserInfo" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="width: 80%;">
            <el-input v-model="workOrderStatus.reason" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
        <el-button type="primary" style="margin:0 80px;" @click="updateWorkOrderStatus()">提交</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </div>
      <div class="event-tracking">
        <div class="title">事件跟踪</div>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :type="activity.type"
            :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    workOrderlist
  } from '@/api/workorder'
  import {
    orderDetails,
    workOrderStatus
  } from '@/api/workorder'

  import {
    orderCreatedUser,
    orderListUser
  } from '@/api/permission'
  import {
    getMyDate
  } from '@/utils/getMyDate'

  // 视频播放
  import {
    getVideourl
  } from '@/api/video.js'
  import 'jquery.nicescroll'
  import PlayerBox from '@/components/DeviceVideoPlayer/PlayerBox'
  // 退出全屏
  var exitWebFS = (that) => {
    return function(e) {
      if (e.key === 'Escape' && !e.repeat) {
        if (document.body.classList.contains('web-fullscreen-fix')) {
          document.body.classList.remove('web-fullscreen-fix')
          if (that.videoStream === 'WS') return
          that.getHW()
        }
      }
    }
  }

  export default {
    name: '',
    components: {
      PlayerBox
    },
    filters: {
      // 修改时间格式
      getMyDate(time) {
        return getMyDate(time)
      }
    },
    data() {
      // const name
      return {
        id: '',
        details: {},
        picturesLength: 0,
        dealWithPicturesLength: 0,
        workOrderStatus: {
          id: '',
          acceptUserId: '', // 如果是转派工单就传入要转派的userId
          status: '', // REJECTED驳回，ACCEPT验收通过，RECTIFICATION整改，NOT_RECTIFICATION不整改，TURN转派
          reason: '', // 描述
          pictureAddr: '' //	图片地址，多张图片用逗号隔开
        },
        activities: [],
        orderListUserInfo: [], // 处理人列表
        // 视频播放===========
        videoPlayTimer: null,
        has_active: false, // 是否有处于被选中的宫格
        grid_select: -1, // 被选中的宫格位置号, 无被点击则值是-1
        grid_len: 1, // 当前的宫格总数,传给子组件的 props

        cameraIds: [],
        // 保存当前活跃宫格中 播放器的播放参数-----------------------
        rtmpSrc: '', // 操作云台的地址
        rtmpType: '', // 设备类型  目前只球机可以控云台
        // deviceIndex: -1, // 播放的设备是第几个
        deviceId: '',
        gatewayId: '',
        channelNum: '',
        // ----------------------------------------
        playerWidth: '',
        playerHeight: '',
        videoStream: 'WS', // 视频流HLS WEBRTC
        videoStreamId: '',
        routeList: [],
        coverPlatform: false,
        filterText: '', // 搜索框的 检索关键字
        tabActive12_2: false,
        tabActive12_3: true,
        tabActive12_2_old: false,
        ipcArrs: {}
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    watch: {
      playerWidth() {
        this.rotate()
      },
      playerHeight() {
        if (this.tabActive12_2 == true) {
          this.rotate2()
        } else if (this.tabActive12_2_old == true) {
          this.rotate()
        } else {
          this.rotate()
        }
      }
    },
    created() {
      this.id = this.$route.query.id
      console.log(this.id)
    },
    mounted() {
      this.getDetails()
      this.getOrderListUser()
      // 视频播放
      const menuList = JSON.parse(localStorage.getItem('menuList'))
      if (menuList && menuList.length) {
        menuList.map(item => {
          if (item.id === '805') {
            this.routeList = JSON.parse(JSON.stringify(item.children))
          }
        })
        for (const item of this.routeList) {
          item.path = '/' + item.pathName
        }
      }
      window.onresize = () => {
        if (this.videoStream === 'WS') return
        this.getHW()
      }
      // this.getVideoStreamType() // 获取码流类型
      document.addEventListener('keydown', exitWebFS(this))
    },
    beforeDestroy() {
      window.onresize = null
      document.removeEventListener('keydown', exitWebFS(this))

      window.clearInterval(this.videoPlayTimer)
    },
    methods: {
      // 获取详情信息
      getDetails() {
        const params = {
          id: this.id
        }
        orderDetails(params).then(res => {
          this.details = res.data
          console.log(this.details)
          console.log(this.details.patrolPointPos)
          const workOrderFlows = this.details.workOrderFlows
          // 事件追踪
          workOrderFlows.forEach((item, index) => {
            const time = this.$options.filters['getMyDate'](item.createTime)
            const data = {
              content: item.reason + index,
              timestamp: time,
              color: ''
            }
            if (index == 0) data.color = '#0bbd87'
            this.activities.push(data)
          })

          if (!this.details.pictures) {} else {
            this.picturesLength = this.details.pictures.length
          }

          if (!this.details.dealWithPictures) {} else {
            this.dealWithPicturesLength = this.details.dealWithPictures.length
          }
        })
      },
      // 更新工单状态
      updateWorkOrderStatus() {
        this.workOrderStatus.id = this.id
        workOrderStatus(this.workOrderStatus).then(res => {
          console.log(res)
          switch (res.code) {
            case 0:
              this.$message.success(res.msg)
              this.$router.go(0)
              break
            case -1:
              this.$message.error(res.msg)
              break
            case -2:
              this.$message.error(res.msg)
              break
            case -3:
              this.$message.error(res.msg)
              break
            case -4:
              this.$message.error(res.msg)
              break
            default:
          }
        })
      },
      // 获取处理人列表
      getOrderListUser() {
        orderListUser().then(res => {
          console.log(res)
          this.orderListUserInfo = res.data
        })
      },
      // 返回
      goBack() {
        this.$router.back(-1)
      },
      // 视频播放 ==============
      // 网页全屏
      webFS() {
        document.body.classList.add('web-fullscreen-fix')
        if (this.videoStream === 'WS') return
        this.$nextTick(() => {
          this.getHW()
        })
      },
      // 视频缩放调整
      getHW() {
        if (this.tabActive12_2 == true || this.tabActive12_2_old == true) {
          this.playerWidth = $('.video-item12_2').width()
          this.playerHeight = $('.video-item12_2').height()
        } else {
          this.playerWidth = $('.video-item').width()
          this.playerHeight = $('.video-item').height()
        }

        // this.rotate()
      },
      rotate() {
        const h = $('.video-scale .video-js').innerHeight()
        const seita = this.playerHeight / h
        const deg = parseFloat((Math.acos(seita) * 180 / (Math.PI)).toFixed(2))
        const top = (this.playerHeight - h) / 2
        $('.video-js').css('transform', `rotateX(${deg}deg)`)
        $('.video-js').css('top', `${top}px`)
      },
      rotate2() {
        const h = $('.video-scale .video-js').innerHeight()
        const seita = this.playerHeight / h
        const deg = parseFloat((Math.acos(seita) * 180 / (Math.PI)).toFixed(2))
        const top = (this.playerHeight - h) / 2
        if (window.innerHeight > 1200) {
          $('.video-js').css('transform', `scaleY(2.4)`)
        } else if (window.innerHeight >= 1100 && window.innerHeight <= 1200) {
          $('.video-js').css('transform', `scaleY(2.25)`)
        } else if (window.innerHeight > 1080 && window.innerHeight < 1100) {
          $('.video-js').css('transform', `scaleY(2.15)`)
        } else if (window.innerHeight >= 1050 && window.innerHeight <= 1080) {
          $('.video-js').css('transform', `scaleY(2.1)`)
        } else if (window.innerHeight >= 1000 && window.innerHeight < 1050) {
          $('.video-js').css('transform', `scaleY(2.05)`)
        } else if (window.innerHeight >= 950 && window.innerHeight < 1000) {
          $('.video-js').css('transform', `scaleY(1.9)`)
        } else if (window.innerHeight >= 850 && window.innerHeight < 900) {
          $('.video-js').css('transform', `scaleY(1.8)`)
        } else if (window.innerHeight >= 750 && window.innerHeight < 800) {
          $('.video-js').css('transform', `scaleY(1.7)`)
        } else if (window.innerHeight >= 725 && window.innerHeight < 750) {
          $('.video-js').css('transform', `scaleY(1.6)`)
        } else if (window.innerHeight >= 700 && window.innerHeight < 725) {
          $('.video-js').css('transform', `scaleY(1.5)`)
        } else if (window.innerHeight >= 650 && window.innerHeight < 700) {
          $('.video-js').css('transform', `scaleY(1.4)`)
        } else if (window.innerHeight > 625 && window.innerHeight < 650) {
          $('.video-js').css('transform', `scaleY(1.3)`)
        } else if (window.innerHeight > 600 && window.innerHeight < 625) {
          $('.video-js').css('transform', `scaleY(1.2)`)
        } else if (window.innerHeight <= 600) {
          $('.video-js').css('transform', `rotateX(${deg}deg)`)
          $('.video-js').css('top', `${top}px`)
        }
      },

      // 获取码流类型
      getVideoStreamType() {
        getVideoStreamType().then(res => {
          if (res.data.code === 0) {
            window.localStorage.setItem('videoStreamType', res.data.data.stream_type)
            if (!res.data.data) return
            console.log(res.data.data.stream_type)
            this.videoStream = res.data.data.stream_type ? res.data.data.stream_type : 'WS'
            this.videoStreamId = res.data.data.id
          }
        }).catch(err => {
          this.videoStream = 'WS'
        })
      },
      // 切换全屏
      changeFullScreen() {
        const el = this.$refs.videoArea
        const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el
          .msRequestFullScreen
        if (typeof rfs !== 'undefined' && rfs) {
          rfs.call(el)
          return
        }
        if (typeof window.ActiveXObject !== 'undefined') {
          const wscript = new ActiveXObject('WScript.Shell')
          if (wscript) {
            wscript.SendKeys('{F11}')
          }
        }
      },

      // 宫格数量: 被切换
      changeTab(tab, value, way) {
        this.rtmpSrc = ''
        this.deviceId = ''
        this.rtmpType = ''
        this.gatewayId = ''
        this.channelNum = ''

        this.has_active = false
        // this.grid_select = -1

        this.$nextTick(() => {
          this.grid_select = -1
          if (tab === 1) {
            this.grid_select = 0
          } else if (tab === 12 && way == 3) {
            this.tabActive12_2 = false
            this.tabActive12_3 = false
            this.tabActive12_2_old = true
          } else if (tab === 12 && way == 2) {
            this.tabActive12_2 = true
            this.tabActive12_3 = false
            this.tabActive12_2_old = false
          } else {
            this.tabActive12_2 = false
            this.tabActive12_3 = true
            this.tabActive12_2_old = false
          }
          this.grid_len = tab
        })
      },
      heartBeat() { // 每个一段时间执行一次 心跳接口
        window.clearInterval(this.videoPlayTimer)
        this.videoPlayTimer = window.setInterval(() => {
          console.log(new Date())
          console.log('调用了心跳接口--->')
          getHeartBeat()
        }, 180000)
      },
      // 通过ref,拿到子组件. 操作子组件
      getChildVal(position, checked, that, empty, tmpurl = '', data = {}) { // 各参数: (位置, 打开视频?,this, 清空, url, data)
        if (empty == 1) { // 清空子组件 如下属性值
          that.$refs['videoPlayer' + position][0].videoSrc = ''
          that.$refs['videoPlayer' + position][0].videoId = ''
          // that.$refs['videoPlayer' + position][0].videoTitle = ''
          that.$refs['videoPlayer' + position][0].videoType = ''
          that.$refs['videoPlayer' + position][0].gatewayId = ''
          that.$refs['videoPlayer' + position][0].channelNum = ''
        } else if (empty == 0) {
          that.$refs['videoPlayer' + position][0].videoSrc = tmpurl
          that.$refs['videoPlayer' + position][0].videoId = data.deviceIndex
          that.$refs['videoPlayer' + position][0].videoTitle = data.name
          that.$refs['videoPlayer' + position][0].videoType = data.type
          that.$refs['videoPlayer' + position][0].gatewayId = data.gatewayIndex
          that.$refs['videoPlayer' + position][0].channelNum = data.number
        }
        that.$nextTick(() => {
          if (that.has_active && that.grid_select == position) { // (1)有处于活跃的宫格
            if (checked) { // 打开活跃宫格的视频,或者切换活跃宫格:  保存处于活跃的视频播放参数
              const child_ele = that.$refs['videoPlayer' + position][0]
              that.rtmpSrc = child_ele.videoSrc
              that.deviceId = child_ele.videoId
              that.rtmpType = child_ele.videoType
              that.gatewayId = child_ele.gatewayId
              that.channelNum = child_ele.channelNum
            } else { // 关闭活跃宫格的视频
              that.rtmpSrc = ''
              that.deviceId = ''
              that.rtmpType = ''
              that.gatewayId = ''
              that.channelNum = ''
            }
          } else { // (2)无活跃的宫格
            this.rtmpSrc = ''
            this.deviceId = ''
            this.rtmpType = ''
            this.gatewayId = ''
            this.channelNum = ''
          }

          // if(checked) getHeartBeat()   // 无论是否有活跃的宫格, 打开视频都要 调用此函数
        })
      },
      // 宫格: 某一项被点击
      handleGrid(argu) {
        const position = argu[0]
        const is_active = argu[1]

        if (!this.has_active && !is_active) { // 没有被选中的宫格, 则让当前被点击的宫格处于活跃
          this.has_active = true
          this.grid_select = position
        } else if (this.has_active && is_active) { // 有被选中的宫格, 活跃的再次接受点击,则取消活跃
          this.has_active = false
          this.grid_select = -1
        } else if (this.has_active && !is_active) { // 有被选中的宫格, 非活跃的被点击,则切换活跃宫格
          this.has_active = true
          this.grid_select = position
        }
        this.getChildVal(position, !is_active, this, -1)
      },

      // 云台控制
      changePtz(command) {
        ptzControl({
          deviceIndex: this.deviceId,
          ptzCommand: command,
          speed: 0,
          gatewayIndex: this.gatewayId,
          channelNum: this.channelNum
        }).then((res) => {
          if (res.data.code !== 0) {
            this.$message.error(res.data.msg)
          }
        }).catch((err) => {
          // this.$message.error(err.message)
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .ibox {
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 4px rgba(55, 55, 55, .2);
    margin-bottom: 40px;
  }

  /* 工单信息 */
  .info-box {
    width: 100%;
    margin-bottom: 40px;

    .list {
      padding: 0 20px;

      ul {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        li {
          width: 25%;
          font-size: 14px;
        }
      }

      ul:nth-child(3) {
        li {
          width: 100%;
          display: flex;

          label {
            min-width: 70px;
          }
        }
      }
    }
  }

  /* 工单照片 */
  .workorder-photo {
    flex: 1;

    .img-box {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }

  .workorder-photo:nth-child(1) {
    margin-right: 76px;
  }

  /* 事件 */
  .event-processing {
    flex: 1;
    margin-right: 76px;
  }

  .event-tracking {
    flex: 1;
  }

  .el-form-item {
    margin-bottom: 14px;
  }

  /*公共样式*/
  html,
  body,
  li {
    margin: 0;
    list-style: none;
    font-style: normal;
  }

  .ibox-flex {
    display: flex;
    margin-bottom: 40px;
  }

  .title {
    width: 100%;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: bold;
  }

  /* 视频播放 */
  // 基础颜色
  $color-primary: #2E89FF; // 系统主色
  $color-success: #0EC00F; // 成功
  $color-warning: #FF941D; // 警告
  $color-danger: #FF6565; // 错误
  $color-info: #BBBBBB; // 信息
  // 背景颜色
  $header-background: #2E89FF; // 头部背景色
  $app-background: #E9E9F0; // 全局背景色
  $page-background: #E9E9F0; // 页面背景色
  $page-background-light: #F7F7F9; // 布局背景色
  // 字体颜色
  $font-primary: #333; // 字体正文颜色(黑色)
  $font-result: #666; // 字体提示颜色(灰色)
  $font-info: #999; // 字体提示颜色(灰色)
  $font-pop: #646464; // pop弹框字体颜色

  $hover-backgoround: #DEE7F9; // 列表hover背景颜色
  $border-color: #E1E1E1; // 线的颜色
  $border-color-search: #BBBBBB; // 搜索框border颜色
  $tr-light-background: #E7EDF8;
  $tr-background: #F7F7F9;
  $th-background: #DEE7F9;

  // scrollbar
  $scrollbar-width: 6px;
  $scrollbar-height: 6px;
  $scrollbar-track-color: transparent;
  $scrollbar-thumb-color: #bbb;

  //===========================================
  .device-tree-title {
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8F8F8;
    padding: 0 10px;

    .title {
      font-size: 18px;
      color: #333;
    }

    .tree-search {
      /*margin-bottom: 10px;*/
      // flex: 0 0 40px;
      // margin-left: 15px;
      // width: calc(100% - 30px);
      width: 60%;

      .el-input__suffix {
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 0px 4px 4px 0px;
        border: 1px solid #DCDFE6;
        top: 0px;
        right: 0px;
        box-sizing: border-box;
      }

      .search-icon {
        color: #aaa;
        cursor: pointer;
        font-size: 16px;
        // font-weight: bold;
        height: 32px;
      }
    }
  }

  .panel-container {
    background: #fff;
    overflow: hidden;

    .panel-title {
      position: relative;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 60px;
      color: #333;
      padding-left: 30px;
    }

    .panel-title2 {
      background-color: #cfd;
      position: relative;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 60px;
      color: #333;
      padding-left: 30px;
      display: flex;
      justify-content: space-between;
    }

    .panel-title-grey {
      background: #F8F8F8;
    }
  }

  .home-right {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;

    .operator {

      // position: absolute;
      // top: 0;
      // right: 30px;
      i {
        font-style: normal;
        font-size: 20px;
        cursor: pointer;
        color: #bbb;

        &:not(:last-child) {
          margin-right: 20px;
        }

        &.active {
          color: $color-primary;
        }

        &:hover {
          color: $color-primary;
        }

        &.disabled {
          cursor: not-allowed;
        }

        &.disabled:hover {
          color: #dddddd;
        }
      }

      .iconfont12 {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
      }
    }

    .panel-content {
      flex: 1;
      padding: 10px 30px;
      position: relative;
      overflow: hidden;

      .video-content {
        width: 100%;
        height: 100%;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .video-item {
          display: inline-block;
          overflow: hidden;
        }

        &.video-item-25 .video-item {
          width: 19.9%;
          height: 19.8%;
        }

        &.video-item-24 .video-item {
          width: 16.62%;
          height: 24.867%;

          &:nth-child(1) {
            order: 1;
          }

          &:nth-child(2) {
            order: 2;
          }

          &:nth-child(3) {
            order: 7;
          }

          &:nth-child(4) {
            order: 8;
          }

          &:nth-child(5) {
            order: 3;
          }

          &:nth-child(6) {
            order: 4;
          }

          &:nth-child(7) {
            order: 9;
          }

          &:nth-child(8) {
            order: 10;
          }

          &:nth-child(9) {
            order: 5;
          }

          &:nth-child(10) {
            order: 6;
          }

          &:nth-child(11) {
            order: 11;
          }

          &:nth-child(12) {
            order: 12;
          }

          &:nth-child(13) {
            order: 13;
          }

          &:nth-child(14) {
            order: 14;
          }

          &:nth-child(15) {
            order: 19;
          }

          &:nth-child(16) {
            order: 20;
          }

          &:nth-child(17) {
            order: 15;
          }

          &:nth-child(18) {
            order: 16;
          }

          &:nth-child(19) {
            order: 21;
          }

          &:nth-child(20) {
            order: 22;
          }

          &:nth-child(21) {
            order: 17;
          }

          &:nth-child(22) {
            order: 18;
          }

          &:nth-child(23) {
            order: 23;
          }

          &:nth-child(24) {
            order: 24;
          }

        }

        &.video-item-16 .video-item {
          width: 24.9%;
          height: 24.8%;
        }

        &.video-item-12 .video-item {
          width: 24.9%;
          height: 33.1%;
        }

        &.video-item-12 .video-item12_2 {
          width: 16.55%;
          height: 49.8%;
        }

        &.video-item-9 .video-item {
          width: 33.25%;
          height: 33.1%;
        }

        &.video-item-4 .video-item {
          width: 49.97%;
          height: 49.85%;
        }

        &.video-item-1 .video-item {
          width: 100%;
          height: 100%;
        }
      }

      .device-list {
        position: absolute;
        top: 10px;
        right: 0;
        width: 345px;
        height: calc(100% - 20px);
        padding-right: 14px;

        .device-item {
          width: 100%;
          padding: 10px;
          border: 1px solid $border-color;
          margin-top: 20px;
          cursor: pointer;

          &:first-child {
            margin-top: 0;
          }

          &.active {
            border: 2px solid #FF941D;
          }

          .device-title {
            position: relative;
            margin-bottom: 6px;

            i {
              position: absolute;
              display: inline-block;
              top: 6px;
              left: 0;
              width: 8px;
              height: 8px;
              border-radius: 50%;

              &.device-offline {
                background: $color-danger;
              }

              &.device-online {
                background: $color-success;
              }
            }

            span {
              display: block;
              font-size: 14px;
              color: $font-primary;
              padding-left: 15px;
            }
          }

          .device-img {
            display: inline-block;
            width: 100%;
          }
        }
      }
    }
  }
</style>
